<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 在线考试系统</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --student-accent: #4361ee;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            padding: 2rem 0;
        }

        .profile-header {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            text-align: center;
            position: relative;
        }

        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--student-accent), #3a0ca3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 3rem;
            color: white;
            box-shadow: 0 8px 25px rgba(67, 97, 238, 0.3);
        }

        .profile-name {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #333;
        }

        .profile-role {
            color: #6c757d;
            font-size: 1.1rem;
            margin-bottom: 0;
        }

        /* 信息卡片 */
        .info-card {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .info-card-header {
            background: linear-gradient(135deg, var(--student-accent), #3a0ca3);
            color: white;
            padding: 1.25rem 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
        }

        .info-card-header i {
            margin-right: 10px;
            font-size: 1.25rem;
        }

        .info-card-body {
            padding: 1.5rem;
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label {
            font-weight: 600;
            color: #555;
            min-width: 120px;
        }

        .info-value {
            color: #333;
            flex: 1;
            text-align: right;
        }

        .info-value.editable {
            cursor: pointer;
            color: var(--student-accent);
            transition: var(--transition);
        }

        .info-value.editable:hover {
            text-decoration: underline;
        }

        .edit-form {
            display: none;
            margin-top: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .edit-form.show {
            display: block;
        }

        .form-control {
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 0.75rem;
            font-size: 0.95rem;
        }

        .form-control:focus {
            border-color: var(--student-accent);
            box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--student-accent), #3a0ca3);
            border: none;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            border-radius: 8px;
            transition: var(--transition);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        .btn-secondary {
            background: #6c757d;
            border: none;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            border-radius: 8px;
            transition: var(--transition);
        }

        .btn-secondary:hover {
            background: #5a6268;
        }

        /* 页脚样式 */
        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }

        .footer-title {
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: white;
            text-decoration: underline;
        }

        .social-icons {
            display: flex;
            gap: 15px;
            margin-top: 1rem;
        }

        .social-icons a {
            color: white;
            font-size: 1.5rem;
            transition: var(--transition);
        }

        .social-icons a:hover {
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .navbar-brand {
                font-size: 1.2rem;
            }

            .profile-header {
                padding: 1.5rem;
            }

            .profile-avatar {
                width: 100px;
                height: 100px;
                font-size: 2.5rem;
            }

            .info-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .info-value {
                text-align: left;
            }
        }

        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="/home/manage">
            <i class="fas fa-user-graduate"></i>在线考试系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/exam/list"><i class="fas fa-file-alt"></i> 考试列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/score/analysis"><i class="fas fa-chart-line"></i> 成绩分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/resources"><i class="fas fa-book"></i> 学习资源</a>
                </li>
            </ul>

            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="/student/profile/manage">
                        <i class="fas fa-user-circle"></i> 个人信息
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content">
    <div class="container">
        <!-- 个人信息头部 -->
        <div class="profile-header">
            <div class="profile-avatar">
                <i class="fas fa-user"></i>
            </div>
            <h1 class="profile-name" id="studentName" th:text="${profile != null ? profile.realName : '学生'}">学生</h1>
            <p class="profile-role">学生用户</p>
        </div>

        <!-- 基本信息 -->
        <div class="info-card">
            <div class="info-card-header">
                <i class="fas fa-info-circle"></i> 基本信息
            </div>
            <div class="info-card-body">
                <div class="info-item">
                    <span class="info-label">学号ID</span>
                    <span class="info-value" id="userId" th:text="${profile != null ? profile.userId : '未知'}">未知</span>
                </div>
                <div class="info-item">
                    <span class="info-label">用户名</span>
                    <span class="info-value" id="userName" th:text="${profile != null ? profile.userName : '未知'}">未知</span>
                </div>
                <div class="info-item">
                    <span class="info-label">真实姓名</span>
                    <span class="info-value" id="realName" th:text="${profile != null ? profile.realName : '未知'}">未知</span>
                </div>
                <div class="info-item">
                    <span class="info-label">所在班级</span>
                    <span class="info-value" id="className" th:text="${profile != null ? profile.className : '未分配'}">未分配</span>
                </div>
                <div class="info-item">
                    <span class="info-label">学习课程</span>
                    <span class="info-value" id="courseNames" th:text="${profile != null ? profile.courseNames : '暂无课程'}">暂无课程</span>
                </div>
            </div>
        </div>

        <!-- 联系方式 -->
        <div class="info-card">
            <div class="info-card-header">
                <i class="fas fa-address-book"></i> 联系方式
            </div>
            <div class="info-card-body">
                <div class="info-item">
                    <span class="info-label">邮箱</span>
                    <span class="info-value editable" id="email" th:text="${profile != null ? profile.email : '未设置'}" onclick="editEmail()">未设置</span>
                </div>
                <div class="edit-form" id="emailEditForm">
                    <div class="row">
                        <div class="col-md-8">
                            <input type="email" class="form-control" id="emailInput" placeholder="请输入邮箱地址">
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-primary me-2" onclick="saveEmail()">
                                <span class="save-text">保存</span>
                                <span class="loading" style="display: none;"></span>
                            </button>
                            <button class="btn btn-secondary" onclick="cancelEdit('emailEditForm')">取消</button>
                        </div>
                    </div>
                </div>

                <div class="info-item">
                    <span class="info-label">电话号</span>
                    <span class="info-value editable" id="phone" th:text="${profile != null ? profile.phone : '未设置'}" onclick="editPhone()">未设置</span>
                </div>
                <div class="edit-form" id="phoneEditForm">
                    <div class="row">
                        <div class="col-md-8">
                            <input type="tel" class="form-control" id="phoneInput" placeholder="请输入手机号码">
                        </div>
                        <div class="col-md-4">
                            <button class="btn btn-primary me-2" onclick="savePhone()">
                                <span class="save-text">保存</span>
                                <span class="loading" style="display: none;"></span>
                            </button>
                            <button class="btn btn-secondary" onclick="cancelEdit('phoneEditForm')">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center py-4">
        <a href="https://gitee.com/sorrymaker04/onlineexam-workload" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <div class="copyright mt-2">
            &copy; 2025 版权所有 北城在线考试系统小组 12 Team
        </div>
    </div>
</footer>
<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>

<script>
    // 页面加载完成后，如果没有后端数据，则通过AJAX获取
    document.addEventListener('DOMContentLoaded', function() {
        // 检查是否有后端数据
        const studentName = document.getElementById('studentName').textContent;
        const userId = document.getElementById('userId').textContent;
        
        // 如果数据是默认值，则通过AJAX获取
        if (studentName === '学生' && userId === '未知') {
            loadProfileData();
        }
    });

    // 加载个人信息数据（AJAX备选方案）
    function loadProfileData() {
        fetch('/student/profile/data')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                if (data) {
                    // 更新页面数据，处理空值
                    document.getElementById('studentName').textContent = data.realName || '学生';
                    document.getElementById('userId').textContent = data.userId || '未知';
                    document.getElementById('userName').textContent = data.userName || '未知';
                    document.getElementById('realName').textContent = data.realName || '未知';
                    document.getElementById('className').textContent = data.className || '未分配';
                    document.getElementById('courseNames').textContent = data.courseNames || '暂无课程';
                    document.getElementById('email').textContent = data.email || '未设置';
                    document.getElementById('phone').textContent = data.phone || '未设置';
                }
            })
            .catch(error => {
                console.error('加载数据失败:', error);
                // 保持默认值
            });
    }

    // 编辑邮箱
    function editEmail() {
        const emailSpan = document.getElementById('email');
        const emailInput = document.getElementById('emailInput');
        const emailEditForm = document.getElementById('emailEditForm');
        
        // 隐藏其他编辑表单
        hideAllEditForms();
        
        // 显示邮箱编辑表单
        emailEditForm.classList.add('show');
        // 如果显示的是"未设置"，则输入框为空，否则显示当前值
        emailInput.value = emailSpan.textContent === '未设置' ? '' : emailSpan.textContent;
        emailInput.focus();
    }

    // 编辑电话号
    function editPhone() {
        const phoneSpan = document.getElementById('phone');
        const phoneInput = document.getElementById('phoneInput');
        const phoneEditForm = document.getElementById('phoneEditForm');
        
        // 隐藏其他编辑表单
        hideAllEditForms();
        
        // 显示电话号编辑表单
        phoneEditForm.classList.add('show');
        // 如果显示的是"未设置"，则输入框为空，否则显示当前值
        phoneInput.value = phoneSpan.textContent === '未设置' ? '' : phoneSpan.textContent;
        phoneInput.focus();
    }

    // 保存邮箱
    function saveEmail() {
        const emailInput = document.getElementById('emailInput');
        const emailSpan = document.getElementById('email');
        const saveBtn = emailInput.parentElement.nextElementSibling.querySelector('.btn-primary');
        const saveText = saveBtn.querySelector('.save-text');
        const loading = saveBtn.querySelector('.loading');
        
        const email = emailInput.value.trim();
        
        if (!email) {
            alert('请输入邮箱地址');
            return;
        }
        
        // 邮箱格式验证
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!emailRegex.test(email)) {
            alert('请输入正确的邮箱格式');
            return;
        }
        
        // 显示加载状态
        saveText.style.display = 'none';
        loading.style.display = 'inline-block';
        saveBtn.disabled = true;
        
        // 发送请求
        fetch('/student/profile/updateEmail', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'email=' + encodeURIComponent(email)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应错误');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                emailSpan.textContent = email;
                cancelEdit('emailEditForm');
                showMessage('邮箱更新成功', 'success');
            } else {
                showMessage(data.message || '更新失败', 'error');
            }
        })
        .catch(error => {
            console.error('更新失败:', error);
            showMessage('网络错误，请重试', 'error');
        })
        .finally(() => {
            // 恢复按钮状态
            saveText.style.display = 'inline';
            loading.style.display = 'none';
            saveBtn.disabled = false;
        });
    }

    // 保存电话号
    function savePhone() {
        const phoneInput = document.getElementById('phoneInput');
        const phoneSpan = document.getElementById('phone');
        const saveBtn = phoneInput.parentElement.nextElementSibling.querySelector('.btn-primary');
        const saveText = saveBtn.querySelector('.save-text');
        const loading = saveBtn.querySelector('.loading');
        
        const phone = phoneInput.value.trim();
        
        if (!phone) {
            alert('请输入手机号码');
            return;
        }
        
        // 手机号格式验证（中国大陆手机号）
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phone)) {
            alert('请输入正确的手机号码格式');
            return;
        }
        
        // 显示加载状态
        saveText.style.display = 'none';
        loading.style.display = 'inline-block';
        saveBtn.disabled = true;
        
        // 发送请求
        fetch('/student/profile/updatePhone', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'phone=' + encodeURIComponent(phone)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应错误');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                phoneSpan.textContent = phone;
                cancelEdit('phoneEditForm');
                showMessage('电话号更新成功', 'success');
            } else {
                showMessage(data.message || '更新失败', 'error');
            }
        })
        .catch(error => {
            console.error('更新失败:', error);
            showMessage('网络错误，请重试', 'error');
        })
        .finally(() => {
            // 恢复按钮状态
            saveText.style.display = 'inline';
            loading.style.display = 'none';
            saveBtn.disabled = false;
        });
    }

    // 取消编辑
    function cancelEdit(formId) {
        document.getElementById(formId).classList.remove('show');
    }

    // 隐藏所有编辑表单
    function hideAllEditForms() {
        document.querySelectorAll('.edit-form').forEach(form => {
            form.classList.remove('show');
        });
    }

    // 显示消息
    function showMessage(message, type) {
        // 创建消息元素
        const messageDiv = document.createElement('div');
        messageDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
        messageDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        messageDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // 添加到页面
        document.body.appendChild(messageDiv);
        
        // 3秒后自动移除
        setTimeout(() => {
            if (messageDiv.parentNode) {
                messageDiv.remove();
            }
        }, 3000);
    }
</script>
</body>
</html> 